Working with the Editor

Top

1. Map Position

In this tab you can set the initial position of the map, when the user loads the page. You have two choices:

  • Manual - Drag and zoom the map to position it and press the "Get Position" button. When the user sees the map it will be on the exact same position and zoom level. After you press "Set Position" the position will be saved and you can freely drag the map around, to place markers for example.
  • Search Query - The map's position will be determined by the search query that you enter. You need to manually specify a zoom level. After you press "Search" the position will be saved and you can freely drag the map around, to place markers for example.

2. Markers

To place a marker, press the Edit Markers button. You will know that you are in Edit Markers Mode when the map gets a red border. While in this mode you can:

  • - Left-Click to add a marker
  • - Right-Click a marker to delete it
  • - Click and drag a marker to move it around

When you are done placing markers, press the Done button to exit edit mode. Then, you can click the Edit button next to it's name (in the Markers tab) to change it's title and add a custom icon if you wish. When you mouseover a marker from the list, it will start bouncing on the map.

By default, markers will animate in when the map is loaded. To disable that feature, uncheck Animate markers on map load in the Markers tab.

3. Info Windows

The info windows need to be attached to a specific marker. To add an info window, press the Edit Info Windows button to enter edit mode. In this mode, you can:

  • - Left-Click a marker to attach a new info window to it
  • - Right-Click a marker to remove the info window attached to it

When you are done, press the Done button to exit edit mode.

To edit an Info Window's contents, click the Edit button in the window list. When you mouse over a window from the list, the marker will start bouncing and you will know to which marker a window is attached.

In the Edit Window dialog you can edit the contents of the Info Window. There are a few preset fields that let you add styles contents like title, subtitle, phone, etc.. If you don't need any of these fields, simply leave them blank. In the last field - Content - you can add any HTML like paragraphs, images or videos.

4. Style

UBER Google Maps supports custom styles for the map. You can use any of the 100 presets, or create your own.

To use a preset, click the Preset button and choose any of the presets. The map will update instantly.

If you wish to use a custom style, which perfectly fits the colors if your site, you can use the Custom styles feature. Click the Custom button to choose that mode. Below the text field there is a link to a free third-party editor, which you can use to generate a custom styles array for your map.

5. Map Size

In the Map Size group you can set the map's width and height. You can also make it flexible, or "Responsive". Note that this will not be reflected in the editor, only in the front-end site.

6. Settings

In this group you can edit several aspects of the map:

  • Title - This is completely arbitrary and for your convenience. End users will not see it anywhere.
  • Language - Choose a language for the map. Please note that because of how the Google Maps API works, you can only have a single language for all maps that you create. For example, if you have 3 maps and you select "Spanish" for the first map, the rest of the maps will be in Spanish too.
  • Allow fullscreen - Check this setting if you want to have a fullscreen button at the top of the map. You can test this feature in the editor as well.
  • Auto Sign-In - If this is enabled, users will be automatically logged in with their Google accounts, if they have.
  • Load Google Maps API - If you have other plugins which use the Google Maps API, you should uncheck this to prevent conflicts.
  • Disable Scroll - Check this box if you want to disable the mousewheel while the mouse is over the map.

Adding a Map to Your Site

Top

Installation

Include the plugin's CSS file in your head tag:

Include the plugin's JS file after jQuery and before the closing body tag:

Adding the Map

To add the map to the site you need the generated jQuery code from the Editor. See previous section for more information. Then, right before the closing "body" tag of your site you paste the generated jQuery code in a "script" tag like this:

The second step is creating a container div element for the map. By default, the id attribute of the container should be map-container. If you need to have a container with different id, then search and replace in the generated jquery code for map-container and replace it with your custom id.

Reload the page and the map should appear.

Support

Top

To provide the best support possible, in December 2014 we launched a brand-new ticket support system for our customers! If you need help with any of our products, please click the button below to submit a ticket:

Submit Ticket